<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>对齐</title>
        <style>
            #valign{
                text-align:center;
                border:1px solid #000;
            }
            #valign span{
                border:1px solid #000; 
            }
           #common{
            height:60px;line-height:60px;}
           #top{vertical-align: top; }
           #bottom{vertical-align: bottom;}
           #sup span{ vertical-align: super;}
        </style>
    </head>
    <body>
        <div id="valign">
            <span id="common">垂直对齐</span>
            <span id="top">上对齐</span>
            <span id="bottom">下对齐</span>
        </div>
        <div id="sup">
            正常<span>上标</span>
        </div>
    </body>
</html>